import React, { useState } from 'react'
import { Button, Form, Input } from 'antd';
import '../components.css'
import { CloseCircleOutlined, CaretUpOutlined, HomeOutlined } from '@ant-design/icons';
import RoleService from '../../services/RolesService';
import EmployeeService from '../../services/EmployeesService';
import { Link, useNavigate } from 'react-router-dom';

export default function AddRole() {
  const [roleId, setRoleId] = useState("")
  const [roleMessage, setRoleMessage] = useState("")
  const [roleJob, setRoleJob] = useState("")
  const [rolePhone, setRolePhone] = useState("")
  const [roleAge, setRoleAge] = useState("")
  const [roleGender, setRoleGender] = useState("")
  const [roleAddress, setRoleAddress] = useState("")


  const navigate = useNavigate();
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const createRole = (r) => {
    console.log(r);
    const role = { roleId, roleMessage, roleJob, roleAge,roleGender,roleAddress }



    if (roleId != "" && roleMessage != "" && roleJob != "" && roleAge != "" && roleGender != "" && roleAddress != "") {
      RoleService.createRole(role).then((response) => {
        navigate('/roleList')
      }).catch((error) => {
        console.log(error);
      })
    }
    else {
      console.log("上述字段不能为空");
    }
  }
  return(
    <div className='addRole'>
      <div className="title" style={{ paddingBottom: '30px' }}>Add Role</div>

      <Form
        name="basic"
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 15,
        }}
        style={{
          marginLeft: '2%',
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete='off'
      >
        <Form.Item
          label="Role Id"
          name="roleid"

          rules={[
            {
              required: true,
              message: 'ID不能为空! ',
            },
          ]}
        >
          <Input value={roleId} onChange={(r) => setRoleId(r.target.value)} 
          placeholder="Please Input Role ID!" />
        </Form.Item>


        <Form.Item
          label="Role Job"
          name="rolejob"
          //tooltip是将鼠标放在控件上用户能看到的消息
          tooltip="What do you want others to call you?"
          //通商
          rules={[
            {
              required: true,
              message: 'Please input Role Job!',
            },
          ]}
        >
          <Input value={roleJob} onChange={(r) => setRoleJob(r.target.value)}
            placeholder="Please Input Role Job!" />
        </Form.Item>

        <Form.Item
          label="Role Age"
          name="roleage"
          rules={[
            {
              required: true,
              message: '请输入正确的年龄!',
            },
          ]}
        >
          <Input value={rolePhone} onChange={(r) => setRolePhone(r.target.value)}
            placeholder='Please input your Role ' />
        </Form.Item>

        <Form.Item
          name="role message"
          label="Role Message"
          rules={[
            {
              required: true,
              message: 'Please input your Role Message!',
            },
          ]}
        >
          <Input value={roleMessage} onChange={(r) => setRoleMessage(r.target.value)}
            placeholder='Please input Role Message' />
        </Form.Item>

        <Form.Item
          name="role address"
          label="Role Address"
          rules={[
            {
              required: true,
              message: '请输入正确的现住的家庭地址!',
            },
          ]}
        >
          <Input value={roleMessage} onChange={(r) => setRoleMessage(r.target.value)}
            placeholder='Please input Role Address' />
        </Form.Item>

        <Form.Item
          name="role name"
          label="Role Name"
          rules={[
            {
              required: true,
              message: 'Please input your Role Name!',
            },
          ]}
        >
          <Input value={roleMessage} onChange={(r) => setRoleMessage(r.target.value)}
            placeholder='Please input Role Name' />
        </Form.Item>

        <Form.Item
          name="role gender"
          label="Role Gender"
          rules={[
            {
              required: true,
              
            },
          ]}
        >
         <Input value={roleMessage} onChange={(r) => setRoleMessage(r.target.value)}
         placeholder='Please input Role Gender!' />
        </Form.Item>




        <Form.Item
          wrapperCol={{
            offset: 5,
            span: 16,
          }}
          style={{
            marginTop: '50px'
          }}
        >


          <Button onClick={(r) => createRole(r)} type="primary"
            htmlType="submit" icon={<CaretUpOutlined />}>
            Submit
          </Button>
          <Button type='danger' style={{ marginLeft: "25px " }} icon={<CloseCircleOutlined />}>
            <Link to={"/rolelist"} style={{ color: "white" }}>Close</Link>
          </Button>


        </Form.Item>
      </Form>
    </div>
  )

}       
        
        
        

          

        
          


     
  
